<template>
	<view class="datailList">
		<!-- 头部搜索 -->
			<view class="search">
				<image class="searchImg" src="../../static/images/search.png"></image>
				<input class="searchInput" type="text" placeholder="点击搜索商品" />
			</view>
		<!-- main -->
			<view class="mainItem"  v-for="(goods,index) in goodsInfo.list" :key="goods.gid">
				<view class="shopItem" @click="toDetail(goods)">
					<image class="checkImg" :src="goods.photo"></image>
				</view>
				<view class="titleItem">
					<text class="foodTitle" @click="toDetail(goods)">{{goods.subject}}</text>
					<view class="priceAndNum" @click="toDetail(goods)">
						<text class="foodPrice">￥{{goods.market_price}}</text>
						<text class="unit-price">{{goods.dprice}}</text>
					</view>
					<view class="shopFooter">
						<text class="footerText" @click="toDetail(goods)">{{goods.comments}} {{goods.sold}}</text>
						<image @click="addCart(goods)" class="cart" src="../../static/images/cart.png"></image>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				goodsInfo:{}
			};
		},
		// 如果是路由传参
		// onLoad(options) {
		// 	this.goodsInfo = JSON.parse(options.goodsInfo)
		// },
		
		// 如果是存储方案
		beforeMount() {
			this.goodsInfo = wx.getStorageSync('goodsInfo_key')
			// console.log(this.goodsInfo);
		},
		computed:{
			...mapGetters(['cartList']),
		},
		methods:{
			// 去详情页
			toDetail(goods){
				wx.setStorageSync('detailInfo_key',goods)
				wx.navigateTo({
					url:'../datail/datail'
				})
			},
			// 加入购物车
			addCart(goods){
				let obj = this.cartList.find(item => item.id === goods.gid)
				if(obj){
					// console.log(obj);
					obj.num++
					obj.isChecked = true
				}else{
					// 如果没有，需要把当前这个页面详情数据变成购物车数据，添加到购物车列表
					obj = goods
					this.$set(obj,'num',1)
					this.$set(obj,'isChecked',true)
					this.cartList.push(obj)
				}
				wx.reLaunch({
					url:'../cart/cart'
				})
			}
		},
		
	}
</script>

<style lang="stylus">
	.datailList
		height 100%
		background-color #FDFDFD
		padding 20rpx
		.search
			display flex
			align-items center
			width 700rpx
			height 80rpx
			border-radius 10rpx
			box-sizing border-box
			background-color #F6F6F6
			color #333333
			line-height 50rpx
			// margin-left 20rpx
			.searchImg
				width 40rpx
				height 40rpx
				margin-left 20rpx
			.searchInput
				font-size 34rpx
				padding-left 20rpx
		.mainItem
			display flex
			flex-direction row
			align-items center
			width 100%
			height 300rpx
			background-color #FFFFFF
			.shopItem
				width 20%
				.checkImg
					width 150rpx
					height 150rpx
					flex-shrink 0
			.titleItem
				width 75%
				height 300rpx
				// background-color #4CD964
				// margin-left 20rpx
				padding 0 40rpx
				.foodTitle
					display block
					padding-top 40rpx
					font-size 28rpx
					color #333333
				.priceAndNum
					display flex
					flex-direction row
					// justify-content space-between
					.foodPrice
						display inline-block
						margin-top 50rpx
						color red
					.unit-price
						font-size 28rpx
						display inline-block
						padding-left 30rpx
						margin-top 55rpx
						color #999999
				.shopFooter
					display flex
					flex-direction row
					justify-content space-between
					.footerText
						font-size 28rpx
						display inline-block
						padding-top 10rpx
						color #999999
					.cart
						width 70rpx
						height 70rpx
		
</style>
